<template>
    <div class="type_form_container">
        <el-form ref="typeForm" :rules="rules" :model="formData" label-width="80px">
            <el-form-item :label="itemLabel('编码')" prop="code">
                <el-input v-model="formData.code" autocomplete="off" placeholder="请输入编码" />
            </el-form-item>
            <el-form-item :label="itemLabel('名称')" prop="name">
                <el-input v-model="formData.name" autocomplete="off" placeholder="请输入名称" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import base from "@common/components/dialog/base.js";

export default {
    extends: base,
    name: "TypeForm",
    data() {
        return {
            rules: {
                code: [
                    { required: true, message: "请输入编码", trigger: "blur" },
                    //目前只兼容中文、大小写英文、数字
                    {
                        // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/,
                        // message:
                        //   "最大 50 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符",
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    //目前只兼容中文、大小写英文、数字
                    {
                        // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/,
                        // message:
                        //   "最大 50 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符",
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
            },
            formData: {},
        };
    },
    methods: {
        itemLabel(label) {
            if (this.$utils.isNotEmpty(this.propsData.labelPrefix)) {
                return `${ this.propsData.labelPrefix || '' }${label}`;
            }
            return label;
        },
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            if (_this.$utils.isEmpty(_this.propsData.api)) {
                return;
            }
            if (_this.$refs.typeForm) {
                _this.$refs.typeForm.clearValidate();
            }
            if (_this.propsData.rules) {
                _this.rules = _this.propsData.rules;
            }
            _this.formData = $.extend({}, _this.propsData.row);
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('typeForm');
            if (valid) {
                let subData = $.extend({}, _this.formData);
                return _this.fetchData(_this.propsData.api, subData).then(() => {
                    _this.$message.success('保存成功！');
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.type_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
